<template>
  <div class="frame">
    <el-form  :model="ruleForm" status-icon :rules="rules"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="原密码" prop="upwd1">
    <el-input type="password" v-model="ruleForm.upwd1" autocomplete="off" id="up1"></el-input>
  </el-form-item>
  <el-form-item label="新密码" prop="upwd2">
    <el-input type="text" v-model="ruleForm.upwd2" autocomplete="off" id="up2"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="upwd3">
    <el-input type="text" v-model="ruleForm.upwd3" id="up3"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="updata()" id="btn">提交</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
export default {
    name:'UpdataPwd',
    data(){
        var check1 = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('原密码不能为空'));
        }else{
          callback()
        }
      };
      var check2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (value.length<4) {
          callback(new Error('新密码长度不能小于4位'));
        }else {
          callback();
        }
      };
      var check3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入确认密码'));
        } else if (value !== this.ruleForm.upwd2) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        uname:'',
        ruleForm: {
          upwd1: '',
          upwd2: '',
          upwd3: '',
        },
        rules: {
          upwd1: [
            { validator: check1, trigger: 'blur',required:true }
          ],
          upwd2: [
            { validator: check2, trigger: 'blur',required:true }
          ],
          upwd3: [
            { validator: check3, trigger: 'blur' ,required:true}
          ]
        }
      };
    },
    methods: {
      async updata(){
            const uname=this.uname;
            const upwd1=this.ruleForm.upwd1;
            const upwd2=this.ruleForm.upwd2;
            const upwd3=this.ruleForm.upwd3;
          if (upwd1&&upwd2&&upwd3&&upwd1!=upwd2&&upwd2==upwd3&&upwd2.length>=4) {
            const res = await this.$store.dispatch("pwdUpdate", { uname, upwd1,upwd2 });
            if(res=='fail'){
              alert("原密码错误")
              this.$router.go(0);
            }else{
              this.$router.go(0);
              alert("修改密码成功！")
            }
            
          }
          else if(upwd1==upwd2){
            alert("新密码不能与原密码相同")
          }else if(upwd2.length<4){
            alert("新密码长度不能小于4位")
          }else if(upwd3!=upwd2){
            alert("请确认新密码和确认密码相同")
          }else{
            alert("修改失败，请填写完整！")
          }   
      },
      async getUser(){
        const uid = this.$store.state.uid;
        const res = await this.$store.dispatch("getUserInfo",{uid});
        this.uname=res.uname;
      }
    },
    computed:{
      
    },
    mounted(){
      this.getUser();
    }
}
</script>
<style lang="less" scoped>
  
    .frame{
    .el-form-item {
      .el-input {
        width: 200px;
      }
    }
    padding-left:200px ;
    padding-top:100px ;
  }
  
</style>
